<template>
  <div class="centerIntroduce">
    <Header></Header>
    <CarouselFigure></CarouselFigure>

    <!-- 专家介绍 -->
    <div class="expertsInfo">

      <div class="leader-care-title">
        <h2>领导关怀</h2>
        <p>————  About Us  ————</p>
      </div>

      <el-row class="expertsInfoTitle">
        <el-col :lg="2" :md="2" :sm="2" :xs="0"
          ><div style="opacity:0">1</div></el-col
        >
        <el-col :lg="6" :md="6" :sm="6" :xs="0">
          <span class="sectionTitle">SAP(四川)产业赋能中心-领导关怀</span>
        </el-col>
        <el-col :lg="1" :md="1" :sm="1" :xs="0"
          ><div style="opacity:0">1</div></el-col
        >
        <el-col :lg="8" :md="8" :sm="8" :xs="0">
          <el-input placeholder="请输入内容" class="input-with-select" v-model="search">
            <template slot="prepend"><i class="el-icon-search"></i></template>
          </el-input>
        </el-col>
        <el-col :lg="1" :md="1" :sm="1" :xs="0"
          ><div style="opacity:0">11</div></el-col
        >
        <el-col :lg="4" :md="4" :sm="4" :xs="0">
          <el-button class="btnStyle" @click="resSearch">搜索</el-button>
          <el-button class="btnStyle" @click="cancleSearch">取消</el-button>
        </el-col>
        <el-col :lg="2" :md="2" :sm="2" :xs="0"
          ><div style="opacity: 0;"></div
        ></el-col>
      </el-row>
    </div>

    <el-row>
      <el-col :lg="2" :md="2" :sm="2" :xs="2"><div style="opacity:0">1</div></el-col>
      <el-col :lg="20" :md="20" :sm="20" :xs="20" class="leader-care-all">
        <LeaderCareBoxItem
          v-for="(item, index) in allArticle"
          :key="index" class="leader-care-one"
          :article="item"
        ></LeaderCareBoxItem>
      </el-col>
      <el-col :lg="2" :md="2" :sm="2" :xs="2"><div style="opacity:0">1</div></el-col>
    </el-row>
   <el-pagination
      class="pagination-big"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    >
      </el-pagination>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import CarouselFigure from "@/components/CarouselFigure.vue";
import ExpertDetailInfoItem from "@/components/centerHome/ExpertDetailInfoItem.vue";
import LeaderCareBoxItem from "@/components/centerHome/LeaderCareBoxItem.vue";
import {ReqArticle,ReqSearch} from '../../request/index'
export default {
  data() {
    return {
      total: 10,
      search:'',
      allArticle:[]
    };
  },
  components: {
    Header,
    Footer,
    CarouselFigure,
    ExpertDetailInfoItem,
    LeaderCareBoxItem,
  },
  methods:{
    // 获取领导关怀文章
    async reqArticle(page){
      let data={
        limit:5,
        page,
        type:3
      }
      let res = await ReqArticle(data)
      this.allArticle = res.page.list;
      this.total =res.page.totalCount;
    },
    // 分页获取
     handleCurrentChange(val) {
      this.reqArticle(val);
    },
    // 搜索文章
    async resSearch(){
      let data={
        limit:5,
        page:1,
        search:this.search,
        type:3
      }
      if(this.search!==''){
         let res = await ReqSearch(data)
         this.allArticle = res.page.list;
         this.total =res.page.totalCount;
     }
    },
    //取消搜索
     // 取消搜索
    cancleSearch(){
      this.search =''
      this.reqArticle(1)
    }
  },
  created(){
    this.reqArticle(1)
  }
};
</script>

<style scoped>
.pagination-big{
  width: fit-content;
  margin: 0 auto;
}
@import url("~assets/styles/centerHome/centerIntroduce.css");
.expertIntroDetailBox {
  margin-bottom: 30px;
}
.expert-intro-detail-all {
  box-shadow: 0px 0px 3px #ccc;
}
.btnStyle {
  background: #1b93c4;
  color: white;
  margin-top: 7px;
}
.expertsInfo {
  margin-top: 30px;
}
.input-with-select {
  margin-top: 7px;
}
.leader-care-title {
  display: none;
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .sectionTitle {
    font-size: 16px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991) {
  .sectionTitle {
    font-size: 14px;
  }
}

@media screen and (max-width:768px) {
  .leader-care-title {
    display: block;
    text-align: center;
    color: #018cbf;
  }
  .leader-care-title h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
  }
  .leader-care-all .leader-care-one {
    box-shadow: 0px 0px 5px #ccc;
    padding: 10px;
    margin: 10px;
  }
}
</style>
